<template>
    <n-drawer v-model:show="drawer" placement="top">
        <div class="h-full flex justify-center items-center">
            <n-input-group class="flex justify-center items-center">
                <n-input v-model:value="keyword" size="large" :style="{ width: '500px' }" placeholder="请输入关键词" />
                <n-button @click="handleSearch" size="large" type="primary" ghost :disabled="!keyword">
                    搜索
                </n-button>
            </n-input-group>
        </div>
    </n-drawer>
</template>

<script setup>
// 引入naive-ui
import { NDrawer, NDrawerContent, NInput, NButton, NInputGroup } from "naive-ui"

// 引入CompostionApi
import { ref, nextTick } from 'vue'

// 开关
const drawer = ref(false);

// 关键词
const keyword = ref("")

// 打开
const open = () => {
    keyword.value = "";
    drawer.value = true;
};

// 关闭
const close = () => {
    drawer.value = false;
}

// 搜索事件
const handleSearch = () => {

    navigateTo({
        name: "search-type-page",
        params: {
            type: "course",
            page: 1
        },
        query: {
            keyword: keyword.value
        }
    });

    nextTick(() => {
        close()
    })
}

// 回车事件
useEnterEvent(() => handleSearch())

// 导出
defineExpose({
    open
})

</script>